<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="user/_fragment :: head(~{::title})">
  <title>博客管理后台</title>
</head>

<body class="hold-transition login-page">
<div class="login-box">
  <div class="login-logo">
    <b>登录</b>-weblog
  </div>
  <!-- /.login-logo -->
  <div class="login-box-body">
    <p class="login-box-msg">登录进入博客系统</p>

    <div style="color: red;text-align: center" class="row" id="errorMessage"></div>
    <!--/*@thymesVar id="LoginMsg" type="string"*/-->
    <div style="color: red;text-align: center" th:text="${LoginMsg}"> </div>

    <form th:action="@{/user/login}" method="post">
      <div class="form-group has-feedback">
        <input name="userId" id="userId" type="number" class="form-control" placeholder="账号">
        <span class="glyphicon glyphicon glyphicon-user form-control-feedback"></span>
      </div>
      <div class="form-group has-feedback">
        <input name="password" id="password" type="password" class="form-control" placeholder="密码">
        <span class="glyphicon glyphicon-lock form-control-feedback"></span>
      </div>


      <div class="row">
        <!-- style="margin-left: 1%" -->
        <div class="col-xs-8">
          <div class="checkbox icheck">
            <label>
              <input type="checkbox"> 记住我
            </label>
          </div>
        </div>
        <!-- /.col -->
        <div class="col-xs-4">
          <button type="submit" disabled="true" id="submit" class="btn btn-primary btn-block btn-flat">登录</button>
        </div>
        <!-- /.col -->
      </div>

    </form>
    <!-- /.social-auth-links -->

    <a href="#">忘记密码</a>
    <a href="regist.html" style="margin-left: 5%" class="text-center">注册账号</a>

  </div>
  <!-- /.login-box-body -->
</div>
<!-- /.login-box -->

<!-- jQuery 3 -->
<script src="../../static/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="../../static/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- iCheck -->
<script src="../../static/plugins/iCheck/icheck.min.js"></script>
<script>
  $(function () {
    $('input').iCheck({
      checkboxClass: 'icheckbox_square-blue',
      radioClass: 'iradio_square-blue',
      increaseArea: '20%' /* optional */
    });
  });

  //避免传入空值到后台
  $(function () {
      $("#userId").blur(function () {
          if(!$(this).val()){ //用户名为空
              $("#errorMessage").html("用户ID不能为空");
              $("#submit").attr("disabled",true);
          }else{  //用户名不为空
              $("#password").blur(function () {
                  if(!$(this).val()){     //密码为空
                      $("#errorMessage").html("密码不能为空");
                      $("#submit").attr("disabled",true);
                  }else{    //用户名密码都不为空
                      $("#errorMessage").html("");
                      $("#submit").attr("disabled",false);
                  }
              });

          }
      });
  })

</script>
</body>
</html>
